<template>
    <div class="user_manage">
        <div class="user_list">
            <div class="operation_user">
                <span class="delect-intent" style="color: #000c17;font-weight: bold;" v-if="moreDelectId.length" @click="batchDelet">删除 <i class="el-icon-delete"></i></span>
                <span class="delect-intent" style="cursor: no-drop;" v-else >删除 <i class="el-icon-delete"></i></span>
            </div>
            <!--    用户信息列表    -->
            <el-table
                    :data="tableData"
                    style="width: 100%"
                    :row-class-name="tableRowClassName"
                    @selection-change="selectFun">
                <el-table-column
                        type="selection"
                        width="50">
                </el-table-column>
                <el-table-column
                        prop="id"
                        label="编号">
                </el-table-column>
                <el-table-column
                        prop="username"
                        label="用户名"
                        width="480"
                align="center">
                </el-table-column>
                <el-table-column
                        prop="account"
                        label="账号"
                        width="380"
                        align="center">
                </el-table-column>
            </el-table>
        </div>
        <!--    分页    -->
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 20, 30]"
                    :page-size="size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import {userListApi, userDeleteApi} from '@/api/backstage/user'
    export default {
        name: "index",
        data() {
            return {
                tableData: [],
                moreDelectId:[],
                currentPage:1,
                size:10,
                total:0

            }
        },
        methods: {
            showList(){
                userListApi(this.currentPage,this.size).then(res =>{
                    this.tableData = res.data.content;
                    this.total = res.data.totalElements;
                    console.log(res);
                })
            },
            tableRowClassName({row, rowIndex}) {
                if (parseInt(rowIndex/2) === rowIndex/2) {
                    return 'success-row';
                }
                return '';
            },
            selectFun(selection){
                this.moreDelectId = selection;
                console.log(this.moreDelectId);
            },
            batchDelet(){
                let arrayId= [];
                for (let i=0;i< this.moreDelectId.length;i++)
                {
                    arrayId.push(this.moreDelectId[i].id);
                }
                userDeleteApi(arrayId).then(()=>{
                    this.showList();
                    this.$message({type: 'success', message: '删除成功!'});
                })
            },
            //    分页方法
            handleSizeChange(val) {
                this.size = val;
                this.currentPage = 1;
                this.showList();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.showList();
            }
        },
        created() {
            this.showList();
        }
    }
</script>

<style lang="scss" scoped>
    .user_manage{
        .user_list{
            height: 550px;
            overflow: auto;
        }
        .user_list::-webkit-scrollbar {
            width: 4px;
            scrollbar-arrow-color:red;
        }
        .block{
            text-align: center;
        }
        /deep/.el-table .success-row {
            background: #f0f9eb;
        }
        .operation_user{
            height: 50px;
            width: 100%;
            .delect-intent{
                font-size: 16px;
                color: #c0c4cc;
                letter-spacing: 0.56px;
                line-height: 60px;
                margin-left: 40px;
                cursor: pointer;
            }
        }
    }
</style>
